<template>
	<view class="bg-white">
		<video src="http://vjs.zencdn.net/v/oceans.mp4" controls class="video-tag" autoplay></video>
		<view class="padding">
			<view class="padding-tb text-bold">你的出现，成为我永恒驻足的原因</view>
			<view class="text-gray text-sm line-height margin-bottom-sm">与你再次相遇的十一月，手握咖啡般温暖的恋爱，记忆停留在，你最明亮的眼眸里......</view>
			<view class="flex justify-between ">
				<view>07月02日</view>
				<view class="" @tap="hideModal">
					<text class="iconfont icon-fenxiang margin-right-xs"></text>
					分享
				</view>
			</view>
			<view class="text-bold text-lg margin-top-xs">
				婚礼电影
			</view>
			<scroll-view scroll-x :scroll-y="false" class="scroll-view margin-top-sm">
				<view v-for="(item,index) in 10" :key="index" class="scroll-item">
					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg" mode="aspectFill" class="scroll-item-img"></image>
					<view class="text-cut margin-top-xs">你的出现，成为我永恒驻足的原因</view>
				</view>
			</scroll-view>
		</view>
		<view class="cu-modal" :class="show?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">分享</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-roundclose"></text>
					</view>
				</view>
				<view class="bg-white text-left">
					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg" mode="aspectFill" class="share-img"></image>
					<view class="padding-sm text-bold text-cut text-lg">
						你的出现，成为我永恒驻足的原因
					</view>
					<view class="flex justify-between padding-tb margin-tb">
						<!-- #ifdef MP-WEIXIN -->
							<view class="text-center text-sm flex-sub">
								<button class="button-share" open-type="share">
									<image src="../../static/img/wx.png" mode="aspectFill" class="icon-img"></image>
									分享给好友
								</button>
							</view>
							<view class="text-center text-sm flex-sub" @click="createPhoto">
								<image src="../../static/img/friends.png" mode="aspectFill" class="icon-img"></image>
								<text class="share-txt">分享朋友圈</text>
							</view>
						<!-- #endif -->
						<view class="text-center text-sm flex-sub" @click="createPhoto">
							<image src="../../static/img/photo.png" class="icon-img"></image>
							<text class="share-txt">制作海报</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="photoShow&&imagePath?'show':''">
			<view class="cu-dialog not-bg">
				<image :src="imagePath" mode="" class="photo-img"></image>
				<view class="margin-top flex justify-between">
					<button class="cu-btn" @tap="hidePhoto">取消</button>
					<button class="cu-btn bg-blue" @click="savePhoto">保存海报</button>
				</view>
			</view>
		</view>
		<canvas :style="{'background': '#fff','width': width+'px','height': height+'px'}" canvas-id="mycanvas"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true,
				photoShow:false,
				imagePath:'',
				cover:'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg',
				width:300,
				height:420
			}
		},
		methods: {
			hideModal(){
				this.show=!this.show;
			},
			hidePhoto(){
				this.photoShow = false;
			},
			//分享给好友
			shareFriends(){
				
			},
			//制作海报
			createPhoto(){
				let that = this;
				let context = uni.createCanvasContext('mycanvas');
				uni.showLoading({
					mask:true,
					title:'生成海报中...'
				})
				context.drawImage(this.cover, 0, 0, this.width, this.height);
				context.draw();
				setTimeout(()=>{
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: this.width,
						height: this.height,
						destWidth: this.width,
						destHeight: this.height,
						canvasId: 'mycanvas',
						success:res=> {
							that.imagePath = res.tempFilePath;
							that.show = false;
							that.photoShow = true;
							uni.hideLoading()
						},
						fail:res=> {
							uni.showToast({
								mask:true,
								icon:"none",
								title:'海报生成失败，请重试'
							})
							uni.hideLoading()
						}
					});
				},1500)
				// uni.getImageInfo({
				// 	src: that.cover,
				// 	success:res=> {
				// 		
				// 	},
				// 	error:error=>{
				// 		console.log(error)
				// 	}
				// })
			},
			savePhoto(){
				let that = this;
				// #ifdef H5
				uni.showToast({
					title: "暂不能保存图片",
					icon: "none"
				});
				return false
				// #endif
				uni.downloadFile({
					url: this.imagePath,
					success: (res) =>{
						if (res.statusCode === 200){
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
									that.photoShow = false;
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.video-tag{
	width: 100%;
}
.scroll-view{
	white-space: nowrap;
	padding-bottom: 200upx;
	.scroll-item{
		display: inline-block;
		width: 300upx;
		margin-right: 20upx;
		&:last-child{
			margin-right:0
		}
		&-img{
			height: 200upx;
			border-radius:10upx;
		}
	}
}
.share-img{
	width: 100%;
	height: 350upx;
}
.icon-img{
	width: 100upx;
	height: 100upx;
	display: block;
	margin: 0 auto 10upx;
}
.cu-dialog{
	width: 600upx;
	&.not-bg{
		background: transparent;
		.cu-btn{
			min-width: 200upx;
		}
	}
}
.button-share,.share-txt{
	font-size: 24upx;
	line-height: 1;
	color: #666666;
	background: transparent !important;
	border: none !important;
	outline: none !important
}
.photo-img{
	height: 600upx * 1.4;
	width: 600upx;
	border-radius: 10upx;
}
</style>
